<template>
    <div id="workYear" style="height: 100%"></div>
</template>

<script>
import * as echarts from 'echarts';
import rxAjax from '@/assets/js/ajax.js';
import useMain from "../../../../stores/use-main";
import { mapState } from 'pinia';
// 系统自定义业务管理列表 api接口
export const FormBoListApi = {};
FormBoListApi.executeInterfaceApi = function (appId, apiKey, params) {
    var url = "/api-system/system/core/sysInterfaceApi/executeApi?appId=" + appId + "&apiKey=" + apiKey;
    return rxAjax.postJson(url, params)
}

export default {
    name: "BarCharts",
    props: ["config"],
    computed: {
        ...mapState(useMain, ['appId'])
    },
    data() {
        return {
            workYearList: []
        }
    },
    mounted() {
        this.$nextTick(function () {
            this.init();
        })
    },
    methods: {
        // 封装通用方法
        async fetchData(apiKey, params) {
            try {
                const response = await FormBoListApi.executeInterfaceApi(this.appId, apiKey, params);
                return response.data.data;
            } catch (error) {
                console.error(`接口 ${apiKey} 调用失败:`, error);
                return null;
            }
        },
        async init() {
            const params = {
                year: new Date().getFullYear() // 获取当前年份
            };
            // 调用三个接口
            this.workYearList = await this.fetchData('zgldtj', { "bodys": { "params": params } })
            this.getWorkYear();
        },
        getWorkYear() {
            let data = this.workYearList;
            let arrName = getArrayValue(data, "name");
            let arrValue = getArrayValue(data, "value");
            let sumValue = eval(arrValue.join("+"));
            let objData = array2obj(data, "name");
            let optionData = getData(data);

            function getArrayValue(array, key) {
                var key = key || "value";
                var res = [];
                if (array) {
                    array.forEach(function (t) {
                        res.push(t[key]);
                    });
                }
                return res;
            }

            function array2obj(array, key) {
                var resObj = {};
                for (var i = 0; i < array.length; i++) {
                    resObj[array[i][key]] = array[i];
                }
                return resObj;
            }

            function getData(data) {
                var res = {
                    series: [],
                    yAxis: []
                };
                for (let i = 0; i < data.length; i++) {
                    res.series.push({
                        name: "",
                        type: "pie",
                        clockWise: false, //顺时加载
                        hoverAnimation: false, //鼠标移入变大
                        radius: [90 - i * 5 + "%", 88 - i * 5 + "%"],
                        center: ["50%", "50%"],
                        label: {
                            show: false
                        },
                        itemStyle: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            },
                            borderWidth: 5
                        },
                        data: [
                            {
                                value: data[i].value * 0.75,
                                name: data[i].name
                            },
                            {
                                value: 100 - data[i].value * 0.75,
                                name: "",
                                itemStyle: {
                                    color: "rgba(0,0,0,0)",
                                    borderWidth: 0
                                },
                                tooltip: {
                                    show: false
                                },
                                hoverAnimation: false
                            }
                        ]
                    });
                    res.series.push({
                        name: "",
                        type: "pie",
                        silent: true,
                        z: 1,
                        clockWise: false, //顺时加载
                        hoverAnimation: false, //鼠标移入变大
                        radius: [90 - i * 5 + "%", 88 - i * 5 + "%"],
                        center: ["50%", "50%"],
                        label: {
                            show: false
                        },
                        itemStyle: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            },
                            borderWidth: 2
                        },
                        data: [
                            {
                                value: 7.5,
                                itemStyle: {
                                    color: "rgb(3, 31, 62)",
                                    borderWidth: 0
                                },
                                tooltip: {
                                    show: false
                                },
                                hoverAnimation: false
                            },
                            {
                                value: 2.5,
                                name: "",
                                itemStyle: {
                                    color: "rgba(0,0,0,0)",
                                    borderWidth: 0
                                },
                                tooltip: {
                                    show: false
                                },
                                hoverAnimation: false
                            }
                        ]
                    });
                    res.yAxis.push(((data[i].value / sumValue) * 100).toFixed(2) + "%");
                }
                return res;
            }
            echarts.init(document.getElementById("workYear")).setOption({
                // title: {
                //   text: "医疗机构监管"
                // },
                legend: {
                    show: true,
                    icon: "circle",
                    top: "center",
                    top: "5%",
                    bottom: "53%",
                    left: "48%",
                    data: arrName,
                    width: 20,
                    padding: [0, 16],
                    itemGap: 5,
                    formatter: function (name) {
                        return (
                            "{title|" +
                            name +
                            "}     {value|" +
                            objData[name].value +
                            "}  {title|%}"
                        );
                    },

                    textStyle: {
                        rich: {
                            title: {
                                fontSize: 12,
                                lineHeight: 5,
                                color: "rgb(0, 178, 246)"
                            },
                            value: {
                                fontSize: 12,
                                lineHeight: 5,
                                color: "#fff"
                            }
                        }
                    }
                },
                tooltip: {
                    show: true,
                    trigger: "item",
                    // formatter:function(params) {
                    //  console.log(params)
                    // },
                    formatter: "{b}:{c}({d}%)"
                },
                color: [
                    "#39B3FF",
                    "#47E0E0",
                    "#7891D9",
                    "#83D978",
                    "#C7A530",
                    "#FF8439"
                ],
                xAxis: [
                    {
                        show: false
                    }
                ],
                series: optionData.series
            });
        },
    }
}
</script>

<style scoped></style>
